<template>
	<view style="padding: 25px 0;">
		<view class="wrap" v-for="(item,index) in list" :key="index">
			<view class="item" >
				<u-avatar :size="45"></u-avatar>
				<view class="right">
					<view class="name">{{item.creater}}</view>
					<view class="desc">
						<view>{{item.content}}</view>
					</view>
					<view class="flex middle between">
						<view class="time">{{$Time.timeIntervalToNow(new Date(item.createTime).getTime())}}</view>
						<vs-img-icon @click.stop.native="response(item)" url="/static/img/comment.png" :size="25"></vs-img-icon>
					</view>
					<view class="resbox" v-if="item.subComment.length>0">
						<view class="rest flex between" v-for="(res,j) in item.subComment" :key="j">
							<view class="crt-l">
								<text class="crt">{{res.creater}}</text>
								<text class="">回复</text>
								<text class="crt">{{res.name}}</text>
								<text class="">：{{res.content}}</text>
							</view>
							<view class="crt-r">{{$Time.timeIntervalToNow(new Date(res.createTime).getTime())}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{}
		},
		data(){
			return{
				
				
			}
		},
		methods:{
			response(item){
				this.$emit('response',item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding: 10px 0;
		border-bottom: 1px solid #e0e0e0;
		.item{
			display: flex;
			width: 90%;
			
			margin: 0 auto;
			overflow: hidden;
			.right{
				width: 100%;
				margin-left: 10px;
				display: flex;
				flex-direction: column;
				.name{
					font-size: 14px;
					color: #c75378;
				}
				.desc{
					flex: 1;
					font-size: 14px;
					color: #353535;
					padding: 5px 0;
					display: block;
					word-break: break-all;
					
				}
				.resbox{
					background: #ebe9e9;
					word-break: break-all;
					border-radius: 4px;
					padding: 10px;
					margin: 10px 0;
					.rest{
						margin: 5px 0;
					}
					.crt{
						color: #d56d8d;
					}
					.crt-l{
						flex: 1;
					}
					.crt-r{
						color: #999;
					}
					
				}
				.time{
					font-size: 12px;
					color: #888;
				}
			}
		}
	}
	
	
</style>
